<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>上传防溺水防控人员照片</title>
    <link rel="stylesheet" href="./style/weui.css"/>
    <link rel="stylesheet" href="./style/example.css"/>
    <link rel="stylesheet" href="./style/jquery-weui.min.css">
    <link rel="stylesheet" href="./style/my.css">
    <style>
        /*.weui-cells{
            background: #fff !important;
        }*/
    </style>
</head>
<body >
<div class="page js_show home" >
        <!-- <a href="javascript:" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="./images/icon_nav_form.png" alt="">
            </div>
        </a> -->
   <!--  <a href="list.html">
        <div class="list_button" style="text-align: left;">
            <img src="./images/icon-back.png" alt="">
        </div>
    </a> -->
     <div style="font-size:30px;text-align: center;margin-top:20px;margin-bottom: 20px;">
         上传防溺水防控人员照片
     </div>
    <div class="weui-form__control-area" >
      <div class="weui-cells__group weui-cells__group_form">
        
        <div class="weui-cells weui-cells_form">
          <div class="weui-cell weui-cell_active">
            <div class="weui-cell__hd"><label class="weui-label">姓名:</label></div>
            <div class="weui-cell__bd">
                <input id="name" class="weui-input" placeholder="请填写姓名" type="text" value=""/>
            </div>
          </div>
          
          
          <div class="weui-cell weui-cell_active" >
            <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
            <div class="weui-cell__bd">
                <input id="tel" class="weui-input" placeholder="请填写联系电话" value="" type="number" pattern="[0-9]*" />
            </div>
          </div>
          
          <div class="weui-cell weui-cell_active">
            <div class="weui-cell__hd"><label class="weui-label">上传照片：</label></div>
            <div class="weui-cell__bd">
                <!-- <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                            </div> 
                            <div role="dialog" aria-hidden="true" aria-modal="false" class="weui-gallery" id="gallery" wah-hotarea="click" style="opacity: 0; display: none;">
            <span role="img" class="weui-gallery__img" id="galleryImg" style="background-image: url(./images/pic_160.png);"></span>
            <div class="weui-gallery__opr">
                <a role="button" aria-label="删除" href="javascript:" class="weui-gallery__del">
                    <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
            </div>
          </div>-->
                            <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles" wah-hotarea="click">
                                <!-- <li class="weui-uploader__file" role="img" aria-label="图片标题" title="轻点两下查看大图" tabindex="0" style="background-image: url(./images/pic_160.png);"></li>
                                <li class="weui-uploader__file" role="img" aria-label="图片标题" title="轻点两下查看大图" tabindex="0" style="background-image: url(./images/pic_160.png);"></li>
                                <li class="weui-uploader__file" role="img" aria-label="图片标题" title="轻点两下查看大图" tabindex="0" style="background-image: url(./images/pic_160.png);"></li>
                                <li class="weui-uploader__file weui-uploader__file_status" style="background-image: url(./images/pic_160.png);">
                                    <div role="alert" class="weui-uploader__file-content">
                                        <i role="img" tabindex="0" aria-label="错误" class="weui-icon-warn"></i>
                                    </div>
                                </li>
                                <li class="weui-uploader__file weui-uploader__file_status" style="background-image: url(./images/pic_160.png);">
                                    <div role="alert" class="weui-uploader__file-content">50%</div>
                                </li> -->
                            </ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/jpg,image/jpeg" multiple="">
                            </div>
                        </div>
            </div>
            <div id="gallery" class="weui-gallery" style="display: none;">
        <span class="weui-gallery__img" id="galleryImg"></span>
        <div class="weui-gallery__opr">
            <a href="javascript:" class="weui-gallery__del">
                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            </a>
        </div>
    </div>
          </div>
          <div style="color:red; font-size: 14px;margin-left:20px">
              建议照片使用1寸电子照片，小于500K。
          <!-- 图片格式支持jpg，jpeg，文件大小不超过2M</br>
且分辨率不超过1024*1024，人脸像素不低于60*60 -->
          </div>
        </div>
        <div class="button-sp-area" style="margin-top:25px;">
          <a href="javascript:" class="weui-btn weui-btn_primary"  id="weui-btn_update">提交</a>
        </div>
        <div>
            
        </div>
      </div>
    </div>







</div> 
 



    





    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery-weui.min.js"></script>
    
    <script src="./js/zepto.min.js?a=1"></script>
    <script src="./js/jweixin-1.0.0.js"></script>
    <script src="./js/weui.min.js"></script>
    <script src="./js/app.js"></script>
    <script type="text/javascript" class="uploader js_show">
    
        $(function(){
            var tmpl = '<li class="weui-uploader__file" role="img" tabindex="0" style="background-image:url(#url#)"></li>',
                $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
                $uploaderInput = $("#uploaderInput"),
                $uploaderFiles = $("#uploaderFiles");

            $uploaderInput.on("change", function(e){
                var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
                console.log(files);
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];
                    // 检查文件格式
                    if (!file.type.match('image/jpeg') && !file.type.match('image/jpg')) {
                        alert('只能上传 jpeg 或 jpg 格式的图片');
                        continue;
                    }
                    if (url) {
                        src = url.createObjectURL(file);
                    } else {
                        src = e.target.result;
                    }

                    // 压缩图片
                    compressImage(file, function(compressedSrc, compressedFile) {
                        console.log('compressedFile.size'+compressedFile.size);
                        if (compressedFile.size <= 2 * 1024 * 1024) {
                            $uploaderFiles.append($(tmpl.replace('#url#', compressedSrc)));
                            uploadImage(compressedFile);
                        } else {
                            alert('图片大小不能超过 2MB');
                        }
                    });
                }
            });

            var currentImg;
            $uploaderFiles.on("click", "li", function(){
                $galleryImg.attr("style", this.getAttribute("style"));
                $gallery.attr('aria-hidden','false');
                $gallery.attr('aria-modal','true');
                $gallery.fadeIn(100);
                setTimeout(function(){
                  $galleryImg.attr("tabindex", '-1').trigger('focus');
                },200);
                currentImg = this;
            });
            $gallery.on("click", function(){
                $gallery.attr('aria-modal','false');
                $gallery.attr('aria-hidden','true');
                $gallery.fadeOut(100);
                setTimeout(function(){
                  $galleryImg.removeAttr("tabindex");
                },200);
                currentImg.focus();
            });

            function compressImage(file, callback) {
                var reader = new FileReader();
                reader.onload = function(event) {
                    var img = new Image();
                    img.onload = function() {
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        var width = img.width;
                        var height = img.height;

                        // 设置分辨率限制
                        if (width > 1024 || height > 1024) {
                            if (width > height) {
                                height *= 1024 / width;
                                width = 1024;
                            } else {
                                width *= 1024 / height;
                                height = 1024;
                            }
                        }

                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0, width, height);

                        var compressedSrc = canvas.toDataURL('image/jpeg', 0.5); // 压缩质量
                        var compressedFile = dataURItoBlob(compressedSrc);

                        // 检查人脸像素
                        var faceWidth = 60;
                        var faceHeight = 60;
                        if (width < faceWidth || height < faceHeight) {
                            alert('人脸像素不能低于 60x60');
                            return;
                        }

                        callback(compressedSrc, compressedFile);
                    };
                    img.src = event.target.result;
                };
                reader.readAsDataURL(file);
            }

            function dataURItoBlob(dataURI) {
                var byteString = atob(dataURI.split(',')[1]);
                var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
                var ab = new ArrayBuffer(byteString.length);
                var ia = new Uint8Array(ab);
                for (var i = 0; i < byteString.length; i++) {
                    ia[i] = byteString.charCodeAt(i);
                }
                return new Blob([ab], {type: mimeString});
            }

            function uploadImage(file) {
                var formData = new FormData();
                formData.append('file', file);
                console.log(file);
                console.log(formData);
                //location.href="success.html";
                /*$.ajax({
                    url: 'http://60.217.22.201:8501/api/video/upload', // 后端接口 URL
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        console.log('上传成功:', response);
                    },
                    error: function(error) {
                        console.error('上传失败:', error);
                    }
                });*/
            }
        });
        /*
$(function(){
        var tmpl = '<li class="weui-uploader__file" role="img" tabindex="0" style="background-image:url(#url#)"></li>',
            $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles")
            ;

        $uploaderInput.on("change", function(e){

            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
            console.log(files);
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];

                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }
                // 压缩图片
                compressImage(file, function(compressedSrc) {
                    $uploaderFiles.append($(tmpl.replace('#url#', compressedSrc)));
                });
                //$uploaderFiles.append($(tmpl.replace('#url#', src)));
            }
        });
        var currentImg;
        $uploaderFiles.on("click", "li", function(){
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.attr('aria-hidden','false');
            $gallery.attr('aria-modal','true');
            $gallery.fadeIn(100);
            setTimeout(function(){
              $galleryImg.attr("tabindex", '-1').trigger('focus');
            },200);
            currentImg = this;
        });
        $gallery.on("click", function(){
            $gallery.attr('aria-modal','false');
            $gallery.attr('aria-hidden','true');
            $gallery.fadeOut(100);
            setTimeout(function(){
              $galleryImg.removeAttr("tabindex");
            },200);
            currentImg.focus();
        });
        function compressImage(file, callback) {
                var reader = new FileReader();
                reader.onload = function(event) {
                    var img = new Image();
                    img.onload = function() {
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        var width = img.width;
                        var height = img.height;

                        // 设置压缩比例
                        if (width > height) {
                            if (width > 1000) {
                                height *= 1000 / width;
                                width = 1000;
                            }
                        } else {
                            if (height > 1000) {
                                width *= 1000 / height;
                                height = 1000;
                            }
                        }

                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0, width, height);

                        var compressedSrc = canvas.toDataURL('image/jpeg', 0.8); // 压缩质量
                        callback(compressedSrc);
                    };
                    img.src = event.target.result;
                };
                reader.readAsDataURL(file);
            }
    });*/
</script>
    <script>
        $("#weui-btn_update").click(function(){
            var name = $("#name").val();
            console.log(name.length);
            if(name.length<=0 || name.length>8){
                $.toast('请检查姓名', "forbidden");
                return false;
            }
            var tel = $("#tel").val();
            if(tel.length<=0 || tel.length!=11){
                $.toast('请检查联系方式', "forbidden");
                return false;
            }
            //location.href="success.html";
            //$.toast('提交成功');
            /*var id = $("#id").val();
            if(!id){
               $.toast('参数有误', "forbidden"); 
            }
            var iccid = $("#iccid").val();
            var customer = $("#customer").val();
            var incharge = $("#incharge").val();
            var tel = $("#tel").val();
            var address=$("#address").val();
            var active_time=$("#active_time").val();
            var package_type=$("#package_type").val();
            var promoter=$("#promoter").val();

            $.ajax({
                type: 'POST',
                dataType: "json",
                url: do_url+"/api/status/info-edit",
                data:"iccid="+iccid+'&customer='+customer+'&incharge='+incharge+'&tel='+tel+'&address='+address+'&active_time='+active_time+'&package_type='+package_type+'&promoter='+promoter+'&id='+id,
                success: function(data) {
                    if(data.code==200){
                        $.toast(data.message);
                    }else{
                        $.toast(data.message, "forbidden");
                    }

                }
            });*/
            
            
        })
        
        /*$.ajax({
            type: 'POST',
            dataType: "json",
            url: do_url+"/api/status/is-login",
            success: function(data) {
                if(data.code==400){
                    location.href="login.html";
                }else{
                    $("#promoter").val(data.name);
                }

            }
        });
        $('#active_time').on('click', function () {
            weui.datePicker({
                start: 1990,
                end: new Date().getFullYear(),
                onChange: function (result) {
                    $('#active_time').val(result[0].value+'-'+result[1].value+'-'+result[2].value);
                },
                onConfirm: function (result) {
                    $('#active_time').val(result[0].value+'-'+result[1].value+'-'+result[2].value);
                },
                title: '日期'
            });
        });
        $('#package_name').on('click', function () {
            weui.picker([{
                label: '一年套餐',
                value: 1
            }, {
                label: '两年套餐',
                value: 2
            }, {
                label: '按量计费',
                value: 3
            }], {
                defaultValue: [1],
                onChange: function (result) {
                    $('#package_name').val(result[0].label);
                    $('#package_type').val(result[0].value);
                },
                onConfirm: function (result) {
                    $('#package_name').val(result[0].label);
                    $('#package_type').val(result[0].value);
                },
                title: '选择套餐'
            });
        });
        $(document).ready(function(){$('body').attr('data-weui-theme', 'light');});
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return decodeURIComponent(r[2]); // unescape替换为decodeURIComponent
            return null; //返回参数值
        }
        getInfo();
        function getInfo(e){
            var e = getUrlParam('e');  
            if(e){
                $.ajax({
                    type: 'get',
                    dataType: "json",
                    url: do_url+"/api/status/info-detail?id="+e,
                    success: function(data) {
                        if(data.code==200){
                            $("#iccid").val(data.datas[0].iccid);
                            $("#customer").val(data.datas[0].customer);
                            $("#incharge").val(data.datas[0].incharge);
                            $("#tel").val(data.datas[0].tel);
                            $("#address").val(data.datas[0].address);
                            $("#active_time").val(data.datas[0].active_time);
                            $("#package_type").val(data.datas[0].package_type);
                            $("#package_name").val(data.datas[0].type_name);
                            $("#promoter").val(data.datas[0].promoter);
                            $("#id").val(data.datas[0].id);
                        }else{
                            $.toast(data.message, "forbidden");
                        }

                    }
                });
            }else{$.toast('参数有误', "forbidden");}
              

        }*/
    </script>

</body>
</html>
